import { ElOption } from 'element-plus'
import type { FormSchema, SelectComponentProps, SelectOption } from '../types'

export const useRenderSelect = () => {
  const renderSelectOptions = (item: FormSchema) => {
    const componentsProps = item?.componentProps as SelectComponentProps
    return componentsProps?.options?.map((option) => renderSelectOptionItem(item, option))
  }

  const renderSelectOptionItem = (item: FormSchema, option: SelectOption) => {
    const componentsProps = item.componentProps as SelectComponentProps
    const labelAlias = componentsProps.props?.label
    const valueAlias = componentsProps?.props?.value
    const keyAlias = componentsProps?.props?.key
    return (
      <ElOption
        {...option}
        key={option[keyAlias || 'key']}
        label={option[labelAlias || 'label']}
        value={option[valueAlias || 'value']}
      ></ElOption>
    )
  }
  return {
    renderSelectOptions
  }
}
